<template>
  <div class="usermanage-container">
    <a-card class="usermanage-container-box">
      <div class="usermanage-container-box-left">
        <div style="display: flex; align-items: center">
          <a-typography-text
            type="warning"
            :style="{ marginRight: '62px', fontSize: '12px', whiteSpace: 'nowrap' }"
          >
            <icon-info-circle />
            标注单位一经添加，无法删改，请谨慎确认添加内容！
          </a-typography-text>
          <a-button type="primary" @click="handeleAddMarkClick" v-role="'A020101002'">
            <template #icon>
              <icon-plus />
            </template>
            <template #default>新建单位</template>
          </a-button>
        </div>
        <a-space direction="vertical" fill class="usermanage-container-box-left-list">
          <div v-if="markList && markList.length === 0">暂无数据</div>
          <div
            v-else
            v-for="(t, i) in markList"
            :key="i"
            :class="
              currentItem === t.id && (searchForm.companyId !== undefined || 0)
                ? 'usermanage-container-box-left-list-item itemActive'
                : 'usermanage-container-box-left-list-item'
            "
            @click.stop="(e) => handleShowUser(t, e)"
          >
            <div class="usermanage-container-box-left-list-item-top">
              <div>{{ t.name }}</div>
              <div>
                <a-switch
                  :model-value="t.status"
                  :checked-value="1"
                  :unchecked-value="0"
                  @change="(value, ev) => handleMarkStatus(t, value, ev)"
                >
                  <template #checked>开</template>
                  <template #unchecked>关</template>
                </a-switch>
              </div>
            </div>
            <div class="usermanage-container-box-left-list-item-bottom">
              备注：{{ t.remark }}
            </div>
          </div>
        </a-space>
      </div>
      <div class="usermanage-container-box-right">
        <div class="usermanage-container-box-search" v-role="'A020101003'">
          <a-space>
            <a-input-search
              v-model="searchForm.keyword"
              :style="{ width: '272px', height: '32px' }"
              placeholder="用户名/手机号"
              allow-clear
              @keydown.enter="search"
            />
            <a-select
              v-model="searchForm.companyId"
              :style="{ width: '272px', height: '32px' }"
              placeholder="标注单位"
              allow-clear
            >
              <a-option
                v-for="item in markList"
                :key="item.id"
                :label="item.name"
                :value="item.id + ''"
              ></a-option>
            </a-select>
          </a-space>
          <div class="search-button">
            <a-button :style="{ marginRight: '16px' }" @click="resset">重 置</a-button>
            <a-button type="primary" @click="search">查 询</a-button>
          </div>
        </div>
        <div class="usermanage-container-box-table">
          <div class="usermanage-container-box-table-header">
            <div class="header-title">用户列表</div>
            <a-button type="primary" @click="handeleAddUserClick()" v-role="'A020101004'">
              <template #icon>
                <icon-plus />
              </template>
              <template #default>新建用户</template>
            </a-button>
          </div>
          <Table
            v-role="'A020101001'"
            class="user-list"
            :columns="columns"
            :data="data"
            :total="total"
            :current="searchForm.page"
            :pageSize="searchForm.pageSize"
            :showPageSize="true"
            :scroll="scroll"
            :scrollbar="true"
            :table-layout-fixed="true"
            @handle-size-change="handleSizeChange"
            @handle-current-size-change="handlePageSizeChange"
          >
            <!-- 数据单元格处理 -->
            <!-- 序号 -->
            <template #index="{ rowIndex }">
              <span>{{ rowIndex + 1 }}</span>
            </template>
            <!-- 标注单位 -->
            <template #company="{ record }">
              <span>{{ record.length !== 0 ? record?.company?.name : "-" }}</span>
            </template>
            <!-- 角色 -->
            <template #roles="{ record }">
              {{record.roleList && record.roleList.map(it => it.name).join(',')}}
            </template>
            <!-- 用户状态 -->
            <template #action="{ record }">
              <div>
                <a-switch
                  v-model="record.status"
                  :checked-value="1"
                  :unchecked-value="0"
                  @change="handleUserStatus(record)"
                >
                  <template #checked>开</template>
                  <template #unchecked>关</template>
                </a-switch>
              </div>
            </template>
            <!-- 操作 -->
            <template #operate="{ record }">
              <a-link @click="handeleAddUserClick(record)" v-role="'A020101005'">编辑</a-link>
            </template>
          </Table>
        </div>
      </div>
    </a-card>
    <!-- 新建单位弹窗 -->
    <Dialog
      :visible="addMarkVisibile"
      :title="'新建单位'"
      :width="440"
      :maskClosable="false"
      :isForm="true"
      :okText="'添加'"
      modal-class="addunit-modal"
      @update:visible="handleMarkVisible"
    >
      <template v-slot>
        <div class="dialog-body">
          <a-form :model="addMarkForm" ref="formRef">
            <a-space direction="vertical" fill>
              <a-form-item
                field="name"
                label="单位名称"
                required
                :rules="[{ required: true, type: 'string', message: '单位名称不能为空' }]"
                :validate-trigger="['change', 'input', 'blur']"
              >
                <a-input
                  v-model.trim="addMarkForm.name"
                  :style="{ width: '272px', height: '32px' }"
                  placeholder="请输入"
                  allow-clear
                  :max-length="10"
                />
              </a-form-item>
              <a-form-item field="remark" label="备注">
                <a-input
                  v-model.trim="addMarkForm.remark"
                  :style="{ width: '272px', height: '32px' }"
                  placeholder="请输入"
                  allow-clear
                />
              </a-form-item>
            </a-space>
          </a-form>
        </div>
      </template>
    </Dialog>
    <!-- 新建/编辑用户弹窗 -->
    <Dialog
      :visible="addUserVisibile"
      :title="isCreatedMode? '新建用户':'编辑用户'"
      :width="780"
      :isForm="true"
      :maskClosable="false"
      :okText="'确认'"
      @update:visible="handleUserVisible"
    >
      <template v-slot>
        <div class="dialog-body">
          <a-form :model="addUserForm" ref="userFormRef">
            <a-form-item
              field="userName"
              label="用户名称"
              required
              :rules="[{ required: true, type: 'string', message: '用户名称不能为空' }]"
              :validate-trigger="['change', 'input', 'blur']"
              label-col-flex="30%"
            >
              <a-input
                v-model="addUserForm.userName"
                :style="{ width: '272px', height: '32px' }"
                placeholder="请输入"
                allow-clear
                :max-length="20"
                show-word-limit
              />
            </a-form-item>
            <a-form-item
              field="mobile"
              label="手机号"
              required
              :disabled="!isCreatedMode"
              :rules="[
                { required: true, type: 'string', message: '手机号不能为空' },
                { minLength: 11, message: '手机号不能少于11位' },
                {
                  match: /^(?:(?:\+|00)86)?1\d{10}$/,
                  message: '手机号输入格式错误，请重新输入',
                },
              ]"
              :validate-trigger="['change', 'input', 'blur']"
              label-col-flex="30%"
            >
              <a-input
                v-model="addUserForm.mobile"
                :style="{ width: '272px', height: '32px' }"
                placeholder="请输入"
                :max-length="11"
                allow-clear
                hide-button
              />
            </a-form-item>
            <a-form-item
              field="companyId"
              label="标注单位"
              required
              :rules="[{ required: true, type: 'string', message: '标注单位不能为空' }]"
              :validate-trigger="['change', 'input', 'blur']"
              label-col-flex="30%"
            >
              <a-select
                v-model="addUserForm.companyId"
                :style="{ width: '272px', height: '32px' }"
                placeholder="请选择"
                allow-clear
              >
                <a-option
                  v-for="item in markValidList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></a-option>
              </a-select>
            </a-form-item>
            <a-form-item
                field="roleIds"
                label="角色"
                required
                :rules="[{ required: true, type: 'string', message: '角色不能为空' }]"
                :validate-trigger="['change', 'input', 'blur']"
                label-col-flex="30%"
            >
              <a-select
                  v-model="addUserForm.roleIds"
                  :style="{ width: '272px', height: '32px', textAlign: 'left', background: '#fff',borderColor: '#d9d9d9' }"
                  placeholder="请选择"
                  multiple
                  :max-tag-count="2"
                  allow-clear
              >
                <a-option
                    v-for="item in roleList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                ></a-option>
              </a-select>
            </a-form-item>
            <a-form-item field="code" label="密码验证码" label-col-flex="30%">
              <a-input
                v-model="addUserForm.code"
                disabled
                :style="{ width: '272px', height: '32px' }"
                placeholder=""
                allow-clear
              />
            </a-form-item>
          </a-form>
        </div>
      </template>
    </Dialog>
  </div>
</template>

<script lang="tsx" setup>
import { onMounted, watchEffect, computed } from "vue";
import Table from "@/components/table/index.vue";
import Dialog from "@/components/dialog/index.vue";
import useMark from "./hooks/useMark";
import useCompose from "./hooks/useCompose";
import useUser from "./hooks/useUser";

// 单位相关属性及事件
const {
  markList,
  addMarkVisibile,
  addMarkForm,
  formRef,
  handeleAddMarkClick,
  getMarkData,
  handleMarkVisible,
  handleMarkStatus,
} = useMark();

// 查询和表格相关属性及事件和新增用户修改用户属性及事件
const {
  searchForm,
  resset,
  search,
  columns,
  data,
  scroll,
  total,
  getTableData,
  handleSizeChange,
  handlePageSizeChange,
  addUserVisibile,
  addUserForm,
  userFormRef,
  markValidList,
  roleList,
  handeleAddUserClick,
  handleEditUser,
  handleUserVisible,
  handleUserStatus,
  currentItem,
  handleShowUser,
} = useCompose();

// const { handleEditUser } = useUser();
const isCreatedMode = computed(()=>{
  return addUserForm.value.code === ''
})

onMounted(() => [getMarkData(), getTableData()]);
watchEffect(() => {
  console.log(total.value, "total");
});
</script>
<style lang="less" scoped>
.usermanage-container {
  padding: 16px;
  height: 100%;
  &-box {
    border-radius: 4px;
    background-color: #fff;
    height: 100%;
    :deep(.arco-card-body) {
      padding: 0;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      color: #333;
      height: 100%;
      padding: 5px 0;
    }
    // 用户界面container左面区域
    &-left {
      padding: 20px;
      height: 100%;
      width: 520px;
      min-width: 520px;
      max-width: 520px;
      border-right: 1px solid #e8e8e8;
      &-list {
        margin-top: 12px;
        height: calc(100vh - 208px);
        overflow-y: auto;
        overflow-x: hidden;
        :deep(.arco-space-item) {
          margin-bottom: 20px !important;
        }
        &-item {
          border: 1px solid #d9d9d9;
          border-radius: 4px;
          cursor: pointer;
          &-top {
            background-color: #fafafa;
            color: #333;
            // width: 480px;
            height: 60px;
            line-height: 60px;
            font-weight: 400;
            font-size: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            border-bottom: 1px solid #d9d9d9;
          }
          &-bottom {
            padding: 20px;
            background-color: #fff;
            height: 56px;
            color: #999;
            font-weight: 400;
            font-size: 12px;
            line-height: 16px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
          }
        }
        &-item.itemActive {
          border-color: #448e97;
        }
      }
    }
    // 用户界面container右面区域
    &-right {
      // flex: 1;
      // width: 100%;
      // height: 100%;
      width: calc(100% - 520px);
      height: calc(100% - 70px);
    }
    &-search {
      // padding: 20px 0;
      // width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #e8e8e8;
      padding: 20px;
      :deep(.arco-form) {
        flex-direction: row;
      }
      :deep(.arco-space-item) {
        margin-right: 20px !important;
      }
      .search-button {
        white-space: nowrap;
      }
    }
    &-table {
      padding: 0 20px;
      height: calc(100% - 84px);
      &-header {
        padding: 20px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .header-title {
          font-weight: 700;
          font-size: 16px;
          color: #333;
        }
      }
    }
  }
}

:deep(.arco-form-item-label-col > .arco-form-item-label) {
  white-space: nowrap;
}
.addunit-modal {
  :deep(.arco-modal-body) {
    padding: 24px 20px;
  }
}
</style>
